<template>
    <el-card class="box-card" width="100%">
        <template #header>
            <div class="card-header">
                <el-button type="primary" :icon="Plus" @click="showTrademarkDialog">添加</el-button>
            </div>
        </template>
        <el-table v-loading="loading" :data="trademarkList" border style="width: 100%">
            <el-table-column type="index" align="center" label="序号" width="80" />
            <el-table-column prop="tmName" align="center" label="品牌名称" width="380" />
            <el-table-column align="center" label="品牌LOGO" width="380">
                <template v-slot="{ row }">
                    <img :src="row.logoUrl" alt="" style="width:100px;height:100px;">
                </template>
            </el-table-column>
            <el-table-column align="left" label="操作">
                <template #default="{ row }">
                    <el-button title="修改" size="small" type="warning" :icon="Edit" @click="editTrademark(row)" />
                    <el-button title="删除" size="small" type="danger" :icon="Delete" @click="removeTrademark(row)" />
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
            :small="small" :disabled="disabled" :background="background"
            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </el-card>




    <!-- 顶部弹出框 -->
    <!-- 从是否有数据的id值来判断显示修改品牌还是添加品牌 -->
    <el-dialog v-model="dialogFormVisible" :title="`${trademark.id ? '修改' : '添加'}品牌`">
        <el-form :rules="rules" :model="trademark" ref="ruleFormRef">
            <el-form-item label="品牌名称" label-width="90px" prop="tmName">
                <el-input v-model="trademark.tmName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="品牌LOGO" label-width="90px" prop='logoUrl'>
                <el-upload class="avatar-uploader" :action="`${BASE_URL}/admin/product/upload`" :show-file-list="false"
                    :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="trademark.logoUrl" :src="trademark.logoUrl" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                    <template #tip>
                        <div class="el-upload__tip">
                            只能上传jpg/jpeg/png等格式图片,且大小不能超过2M
                        </div>
                    </template>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <!-- <el-button type="primary" @click="btnTrademark">确定</el-button> -->
                <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts">
export default {
    name: 'Trademark'

}
</script>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
import { reqGetTrademarkListData, reqUpdateTrademark, reqSaveTrademark, reqDeleteTrademark } from '@/api/product/trademark'
import type { TrademarkListModel, TrademarkModel } from '@/api/model/trademarkModel'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules, UploadProps } from 'element-plus'

const BASE_URL = import.meta.env.VITE_API_URL
const currentPage = ref<number>(1)//当前的页码
const pageSize = ref<number>(10)//每一页要是显示的数量
const total = ref<number>(0)

const trademarkList = ref<TrademarkListModel>([])
const small = ref<boolean>(false)
const background = ref<boolean>(false)
const disabled = ref<boolean>(false)

const dialogFormVisible = ref(false)
// 每次调用这个函数，都会返回一个新的独立对象，和之前的数据没有关系
const initTrademark = () => ({ tmName: '', logoUrl: '' })
// 品牌上传需要用到的响应式的对象
const trademark = reactive<TrademarkModel>(initTrademark())

const loading = ref(true)

//校验上传的规则
const ruleFormRef = ref<FormInstance>()//定义一个ref值 和el-form绑定

const rules = reactive<FormRules>({
    tmName: [
        { required: true, message: '请添加品牌名称', trigger: 'blur' },
        { min: 1, max: 20, message: '长度在1到20之间', trigger: 'blur' }
    ],
    logoUrl: [{ required: true, message: '请选择想要上传的照片', trigger: 'blur' }]
})


// 1、根据分页来获取品牌数据
const getTrademarkListData = async () => {
    loading.value = true
    const result = await reqGetTrademarkListData(currentPage.value, pageSize.value)
    trademarkList.value = result.records
    total.value = result.total
    // 收到数据后隐藏loading效果
    loading.value = false

}
//页面挂载的时候就运行的程序
onMounted(() => {
    getTrademarkListData()
})
// 2、当改变每页显示的条数的时候就会调用的程序
const handleSizeChange = (val: number) => {
    // val就是每页显示的条数，其实也就是pageSize
    pageSize.value = val
    currentPage.value = 1 //再次把当前页码设置为第一页
    // 重新调用获取数据的程序
    getTrademarkListData()
}
// 3、根据当前页码进项切换时出发的函数
const handleCurrentChange = (val: number) => {
    currentPage.value = val //再次把当前页码设置为第一页
    // 重新调用获取数据的程序
    getTrademarkListData()
}

// 4、图片上传成功后会执行的函数
const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
    trademark.logoUrl = response.data
}

//5、图片上传前的校验
const beforeAvatarUpload: UploadProps['beforeUpload'] = rawFile => {
    const imgTypes = ['image/jpeg', 'image/jpg', 'image/png']
    if (!imgTypes.includes(rawFile.type)) {
        ElMessage.error('上传的图片格式必须是JPG/JPEG/PNG格式，请重试')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('图片最大不能超过2M，请重试！')
        return false
    }
    return true
}

// 6、实现添加或者更新品牌，当前这个确定按钮其实是有两个功能的，一个是添加品牌，一个是更新品牌，根据是否有id来判断确定功能
// const btnTrademark = async () => {
//     let result
//     if (trademark.id) {
//         //走到这里说明是有id的，所以以下的函数时更新品牌的函数
//         result = await reqUpdateTrademark(trademark)
//     } else {
//         //以下是添加品牌的函数
//         result = await reqSaveTrademark(trademark)
//     }
//     //应该提示已经成功了
//     ElMessage({
//         message: '操作品牌成功了！',
//         type: 'success'
//     })

//     //下一步就是关闭对话框操作了
//     dialogFormVisible.value = false

//     //重新渲染当前的数据
//     currentPage.value = 1
//     // 重新调用获取数据的程序
//     getTrademarkListData()
// }

// 6、实现添加或者更新品牌，当前这个确定按钮其实是有两个功能的，一个是添加品牌，一个是更新品牌，根据是否有id来判断确定功能
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (trademarkList.id) {
                reqUpdateTrademark(trademark)
            } else {
                reqSaveTrademark(trademark)
            }

            //应该提示已经成功了
            ElMessage({
                message: '操作品牌成功了！',
                type: 'success'
            })
            //下一步就是关闭对话框操作了
            dialogFormVisible.value = false

            //重新渲染当前的数据
            !trademarkList.id ? (currentPage.value = 1) : currentPage.value
            // 重新调用获取数据的程序
            getTrademarkListData()
        } else {
            console.log('error submit!', fields)
        }
    })
}

// 7、当点击“添加品牌”按钮时，要弹出对话框，并且要清空里面原先的数据
const showTrademarkDialog = () => {
    Object.assign(trademark, initTrademark())
    delete trademark.id //清除id
    dialogFormVisible.value = true
}

//8、单击删除按钮，弹出是否删除的提示框，并收集待删除的数据的id
const removeTrademark = (row: TrademarkModel) => {
    ElMessageBox.confirm(`你是否真的要删除${row.tmName}这个品牌吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(async () => {
            //真正的删除品牌
            await reqDeleteTrademark(row.id as number)
            ElMessage({
                message: '删除成功',
                type: 'success',
            })
            //如果删除的最后一页的最后一条数据，则需要让当前页码减1
            currentPage.value = trademarkList.value.length > 1 ? currentPage.value : currentPage.value - 1
            // 重新调用获取数据的程序
            getTrademarkListData()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除'
            })
        })
}

// 9、更新品牌数据之弹框显示待更新的品牌数据
const editTrademark = (row: TrademarkModel) => {
    //将需要显示出来的品牌数据给trademark进行赋值，因为数据是响应式的，页面会渲染出来
    Object.assign(trademark, row) //此时的row当中，是有id的
    dialogFormVisible.value = true
}
</script>

<style>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

/* .box-card {
    width: 690px;
} */

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>









